<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<div th:replace="dashboard/script:: style"></div>
<style>
      .CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
      article {max-width: 100%;padding:10px;}
      .nav-third-level li a {
	 	padding-left: 12px;
	 	color: #696c6e;
	  }
</style>

<body>
<div class="row wrapper wrapper-content animated fadeIn">
        <div class="col-sm-2">
            <div class="ibox float-e-margins" style="border:0px;">
                <ul class="nav nav-third-level collapse in" aria-expanded="true" style="">
					<li class="selected"><a class="menuItem" href="/demo/form/button" data-index="0">并发测试</a></li>
					<li class=""><a class="menuItem" href="/demo/form/grid" data-index="1">模板测试</a></li>
					<li class=""><a class="menuItem" href="/demo/form/select" data-index="2">高场景测试</a></li>
					<li class=""><a class="menuItem" href="/demo/form/basic" data-index="3">基本表单</a></li>
					<li class=""><a class="menuItem" href="/demo/form/cards" data-index="4">卡片列表</a></li>
					<li class=""><a class="menuItem" href="/demo/form/datetime" data-index="11">日期和时间</a></li>
					<li class=""><a class="menuItem" href="/demo/form/duallistbox" data-index="12">左右互选组件</a></li>
					<li class=""><a class="menuItem" href="/demo/form/autocomplete" data-index="13">搜索自动补全</a></li>
				</ul>
            </div>
        </div>
        <div class="col-sm-10">
        
<article >
<h2>自动化脚本(Yaml)</h2>

<form >
<textarea id="code" name="code" style="height:700px">
--- # Favorite movies
- Casablanca
- North by Northwest
- The Man Who Wasn't There
--- # Shopping list
[milk, pumpkin pie, eggs, juice]
--- # Indented Blocks, common in YAML data files, use indentation and new lines to separate the key: value pairs
  name: John Smith
  age: 33
--- # Inline Blocks, common in YAML data streams, use commas to separate the key: value pairs between braces
{name: John Smith, age: 33}
---
receipt:     Oz-Ware Purchase Invoice
date:        2007-08-06
customer:
    given:   Dorothy
    family:  Gale

items:
    - part_no:   A4786
      descrip:   Water Bucket (Filled)
      price:     1.47
      quantity:  4

    - part_no:   E1628
      descrip:   High Heeled "Ruby" Slippers
      size:       8
      price:     100.27
      quantity:  1

bill-to:  &id001
    street: |
            123 Tornado Alley
            Suite 16
    city:   East Centerville
    state:  KS

ship-to:  *id001

specialDelivery:  >
    Follow the Yellow Brick
    Road to the Emerald City.
    Pay no attention to the
    man behind the curtain.
...

</textarea>
</form> 
<div style="font-size: 13px; width: 300px; height: 30px;">Key buffer: <span id="command-display"></span></div>

<script> 
CodeMirror.commands.save = function() {
    alert("Saving");
};
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    keyMap: "vim",
    matchBrackets: true,
    showCursorWhenSelecting: true,
    theme: "ambiance",
    mode: "text/x-yaml" , 
    inputStyle: "contenteditable"
});
editor.setSize('auto','500px');
var commandDisplay = document.getElementById('command-display');
var keys = '';
CodeMirror.on(editor, 'vim-keypress',
function(key) {
    keys = keys + key;
    commandDisplay.innerHTML = keys;
});
CodeMirror.on(editor, 'vim-command-done',
function(e) {
    keys = '';
    commandDisplay.innerHTML = keys;
}); 
</script>

</article>

        </div>
    </div>

</body>
</html>


